<template>
  <div :style="manStyle">
    <div :style="title">
      <i class="el-icon-user"></i>
      <span style="margin-left: 10px;">{{ propValue.title }}</span>
    </div>


    <el-carousel indicator-position="outside" :height="manStyle.height" :interval="propValue.interval">
      <el-carousel-item v-for="(item, index) in userList" :key="index">
        <div style="padding: 5%;display: flex;font-weight: bold;" v-if="propValue.isMuchMan == 0">
          <img :src="item.avatarUrl" :style="avatar" />
          <div style="margin-left: 5%;display: flex;flex-direction: column;justify-content: space-between;">
            <div style="color: green;" :style="statuSize" v-if="item.workStatus == '0'">在岗</div>
            <div style="color: #eee;" :style="statuSize" v-if="item.workStatus == '1'">暂离</div>
            <div style="color: red;" :style="statuSize" v-if="item.workStatus == '2'">休息</div>
            <div style="position: relative;top: -60px;letter-spacing: 4px;" :style="nameColor">{{ item.nickName }}</div>
            <div style="width: 11em;" :style="remarkColor">{{ item.remark }}</div>
          </div>
        </div>

        <div style="border: 1px double #ccc;border-radius: 50px;height: 50px;margin: 10px;text-align: center;line-height: 50px;">
          <div>-------------------------状态操作区域-------------------------</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getUser } from "@/api/system/user";
export default {
  name: '',
  props: {
    propValue: {
      type: Object,
      required: true,
      default: () => { },
    },
    element: {
      type: Object,
      default: () => { },
    }
  },
  data() {
    return {
      title: {
        display: "flex",
        alignItems: "center",
        padding: "10px",
        borderBottom: "1px solid #ccc",
        color: ""
      },
      userList: [],
      form: {},
      manStyle: {
        width: "0px",
        height: "0px",
        backgroundColor: "rgba(255,255,255,0)",
        borderRadius: ""
      },
      nameColor: {
        color: "#000",
        fontSize: "10px"
      },
      remarkColor: {
        color: "#000",
        fontSize: "10px"
      },
      statuSize: {
        fontSize: "10px"
      },
      avatar: {
        width: "0px",
        height: "0px"
      }
    }
  },
  components: {
  },
  computed: {

  },
  watch: {
    'element.style.width': function () {
      const { width, height } = this.element.style
      this.manStyle.width = width + "px"
      this.manStyle.height = height + 'px'
      this.manStyle.backgroundColor = this.propValue.color
    },
    'element.style.height': function () {
      const { width, height } = this.element.style
      this.manStyle.width = width + "px"
      this.manStyle.height = height + 'px'
      this.manStyle.backgroundColor = this.propValue.color
    },
    'propValue.color': function () {
      this.manStyle.backgroundColor = this.propValue.color
    },
    'propValue.border': function () {
      this.manStyle.borderRadius = this.propValue.border + 'px'
    },
    'propValue.titleColor': function () {
      this.manStyle.color = this.propValue.titleColor
    },
    'propValue.user': function () {
      getUser(this.propValue.user).then(response => {
        this.form = response.data.user;
      });
    },
    'propValue.userList': function () {
      this.userList = []
      this.propValue.userList.forEach(element => {
        getUser(element).then(response => {
          this.userList.push(response.data.user)
        });
      });
    },
    'propValue.nameColor': function () {
      this.nameColor.color = this.propValue.nameColor
    },
    'propValue.remarkColor': function () {
      this.remarkColor.color = this.propValue.remarkColor
    },
    'propValue.nameSize': function () {
      this.nameColor.fontSize = this.propValue.nameSize + 'px'
    },
    'propValue.remarkSize': function () {
      this.remarkColor.fontSize = this.propValue.remarkSize + 'px'
    },
    'propValue.statuSize': function () {
      this.statuSize.fontSize = this.propValue.statuSize + 'px'
    },
    'propValue.avatarWidth': function () {
      this.avatar.width = this.propValue.avatarWidth + 'px'
    },
    'propValue.avatarHeight': function () {
      this.avatar.height = this.propValue.avatarHeight + 'px'
    },
    'propValue.isMuchMan': function () {
      this.form = {}
      this.userList = []
      this.propValue.user = ""
      this.propValue.userList = []
      if (this.propValue.isMuchMan == 1) {
        this.avatar.height = 150 + 'px'
        this.avatar.width = 130 + 'px'
        this.propValue.avatarWidth = 130
        this.propValue.avatarHeight = 150
      }
    },
    'propValue.ishasback': function () {
      if (this.propValue.ishasback == 1) {
        this.manStyle.backgroundColor = this.propValue.color
      } else {
        this.manStyle.backgroundColor = ''
      }
    }
  },
  created() {
  },
  mounted() {
    const { width, height } = this.element.style
    this.avatar.width = this.propValue.avatarWidth + 'px'
    this.avatar.height = this.propValue.avatarHeight + 'px'
    this.manStyle.width = width + "px"
    this.manStyle.height = height + 'px'
    this.manStyle.backgroundColor = this.propValue.color
    this.manStyle.borderRadius = this.propValue.border + 'px'
    this.manStyle.color = this.propValue.titleColor
    this.nameColor.color = this.propValue.nameColor
    this.remarkColor.color = this.propValue.remarkColor
    this.nameColor.fontSize = this.propValue.nameSize + 'px'
    this.remarkColor.fontSize = this.propValue.remarkSize + 'px'
    this.statuSize.fontSize = this.propValue.statuSize + 'px'
    if (this.propValue.userList) {
      this.propValue.userList.forEach(element => {
        getUser(element).then(response => {
          this.userList.push(response.data.user)
        });
      });
    }
  },
  methods: {

  },
}
</script>

<style scoped></style>
